import QtQuick
import QtQuick.Controls
import Qt.labs.qmlmodels

Rectangle {
    width: 400
    height: 300
    color: "white"

    // 属性定义
    property int selectedRow: -1
    property int hoveredRow: -1
    readonly property int columnWidth: width / 3
    readonly property int rowHeight: 40
    
    // 颜色定义
    readonly property color headerColor: "#2196F3"
    readonly property color selectedColor: "#bbdefb"
    readonly property color hoverColor: "#e3f2fd"
    readonly property color priceColor: "#E91E63"
    readonly property color borderColor: "#e0e0e0"

    TableModel {
        id: customTableModel
        TableModelColumn { display: "product" }
        TableModelColumn { display: "price" }
        TableModelColumn { display: "stock" }

        rows: [
            { product: "笔记本电脑", price: "6999", stock: "15" },
            { product: "手机", price: "3999", stock: "25" },
            { product: "平板电脑", price: "4599", stock: "10" },
            { product: "智能手表", price: "1999", stock: "30" }
        ]
    }

    // 表头
    Rectangle {
        id: header
        width: parent.width
        height: rowHeight
        color: headerColor

        Row {
            anchors.fill: parent
            Repeater {
                model: ["产品", "价格", "库存"]
                Rectangle {
                    width: columnWidth
                    height: parent.height
                    color: "transparent"
                    Text {
                        anchors.centerIn: parent
                        text: modelData
                        color: "white"
                        font.bold: true
                    }
                }
            }
        }
    }

    // 表格内容
    TableView {
        id: tableView
        anchors {
            top: header.bottom
            left: parent.left
            right: parent.right
            bottom: parent.bottom
        }
        clip: true
        model: customTableModel
        columnSpacing: 1
        rowSpacing: 1

        delegate: Rectangle {
            implicitWidth: columnWidth
            implicitHeight: rowHeight
            color: row === selectedRow ? selectedColor : 
                   row === hoveredRow ? hoverColor : 
                   row % 2 ? "#f5f5f5" : "white"

            MouseArea {
                anchors.fill: parent
                hoverEnabled: true
                onClicked: selectedRow = row
                onEntered: hoveredRow = row
                onExited: hoveredRow = -1
            }

            Rectangle {
                width: parent.width
                height: 1
                color: borderColor
                anchors.bottom: parent.bottom
            }

            Text {
                anchors.centerIn: parent
                text: column === 1 ? "¥" + display : display
                color: column === 1 ? priceColor : "#333333"
                font.pixelSize: column === 1 ? 14 : 13
            }
        }
    }
} 
